<!--
 * @Descripttion: 开放平台-订阅组管理
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-04-10
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-06-17
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-form :model="searchParam" autocomplete="off">
        <a-row :gutter="24">
          <a-col :span="4">
            <a-form-item label="订阅组类型">
              <a-select v-model:value="searchParam.type" placeholder="请选择类型">
                <a-select-option :value="0">默认订阅组</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="订阅组状态">
              <a-select v-model:value="searchParam.disable" placeholder="请选择状态" allowClear>
                <a-select-option :value="0">已创建</a-select-option>
                <a-select-option :value="1">待审批</a-select-option>
                <a-select-option :value="2">使用中</a-select-option>
                <a-select-option :value="3">已禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="订阅组名称">
              <a-input v-model:value="searchParam.name" placeholder="请输入名称" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="选择日期">
              <a-range-picker v-model:value="timeRange" show-time format="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-row justify="end">
              <a-button @click="clear()">重置</a-button>
              <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
            </a-row>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">订阅组管理</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'type'">
            <span>默认订阅组</span>
          </template>
          <template v-if="column.dataIndex === 'disable'">
            <span>{{ DisableType[record.disable] }}</span>
          </template>
          <template v-if="column.dataIndex === 'createdTime'">
            <span>{{ record.createdTime ? formatToDateTime(record.createdTime) : '--' }}</span>
          </template>
          <template v-if="column.dataIndex === 'approveTime'">
            <span>{{ record.approveTime ? formatToDateTime(record.approveTime) : '--' }}</span>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <span>
              <a-popconfirm title="确定要审核通过吗? 该订阅组将获得App Secret Key。" ok-text="确认" cancel-text="取消" @confirm="confirmRecord(record)">
                <a v-if="record.disable === 1">通过</a>
              </a-popconfirm>
              <a-divider type="vertical" v-if="record.disable === 1" />
              <a v-if="record.disable === 1" @click="showModal(record, 3)">驳回</a>
              <a-divider type="vertical" v-if="record.disable === 1" />
              <a v-if="record.disable === 2" @click="showModal(record, 4)">禁用</a>
              <a-divider type="vertical" v-if="record.disable === 2" />
              <a-popconfirm title="确定要启用么，启用后该订阅组将恢复使用平台服务" ok-text="确认" cancel-text="取消" @confirm="confirmRecord(record)">
                <a v-if="record.disable === 4">启用</a>
              </a-popconfirm>
              <a-divider type="vertical" v-if="record.disable === 4" />
              <a @click="showDetail(record)">详情</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="modalData.visible" :title="'禁用/驳回确认'" @ok="changeAppState" :ok-button-props="{ disabled: !modalData.approveDesc }" :confirmLoading="confirmLoading">
      <a-textarea :rows="4" v-model:value="modalData.approveDesc" placeholder="请输入理由" allow-clear />
    </a-modal>
    <a-modal v-model:visible="detailData.visible" title="订阅组详情" :width="860">
      <a-row>
        <a-col :span="20">
          <a-row>
            <a-col :span="12">
              <a-form-item label="订阅组名称">
                {{ detailData.data?.name }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="AppID">
                {{ detailData.data?.appId }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="中文名称">{{ detailData.data?.cname || '--' }}</a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="App Secret Key">
                <span class="secret-container" :title="detailData.data?.appSecret">{{ detailData.data?.appSecret }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="订阅组类型">默认订阅组</a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="订阅组状态">
                {{ DisableType[detailData.data?.disable] || '--' }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="订阅组简介">
                <span class="secret-container" :title="detailData.data?.description">{{ detailData.data?.description }}</span>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4">
          <div class="logo-container">
            <div class="apply-title">订阅组LOGO</div>
            <a-image :width="90" :src="detailData.data?.logo" class="apply-logo" />
          </div>
        </a-col>
      </a-row>
      <a-divider orientation="left" orientation-margin="0px">申请信息</a-divider>
      <a-row>
        <a-col :span="20">
          <a-row>
            <a-col :span="12">
              <a-form-item label="申请账号">
                {{ detailData.data?.userName }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="申请人类型">
                {{ detailData.data?.companyName }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="创建时间">
                {{ detailData.data?.createdTime ? formatToDateTime(detailData.data?.createdTime) : '--' }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="审批时间">
                {{ detailData.data?.approveTime ? formatToDateTime(detailData.data?.approveTime) : '--' }}
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4" />
      </a-row>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import type { Dayjs } from 'dayjs'
  import { onMounted, reactive, ref, watch } from 'vue'

  import { getApplyByDetail, getApplyByPage, updateAppState } from '/@/api/manage/openApiApp'
  import { DisableType } from '/@/api/manage/openApiApp/enum'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { formatToDateTime } from '/@/utils/date'
  type RangeValue = [Dayjs, Dayjs]
  const timeRange = ref<RangeValue>()

  /** 搜索条件 */
  const searchParam = reactive<ApplyInfoByPageTypes.IRequest>({
    type: null,
    disable: null,
    name: null,
    startTime: null,
    endTime: null,
  })

  const modalData = reactive({
    visible: false,
    disable: 3,
    uuid: '',
    approveDesc: null,
  })
  const detailData = reactive<any>({
    visible: false,
    data: null,
  })
  const confirmLoading = ref<boolean>(false)

  watch(
    timeRange,
    (value) => {
      if (value) {
        searchParam.startTime = formatToDateTime(value[0])
        searchParam.endTime = formatToDateTime(value[1])
      } else {
        searchParam.startTime = null
        searchParam.endTime = null
      }
    },
    { immediate: true, deep: true },
  )

  watch(
    modalData,
    (value) => {
      if (!value.visible) {
        modalData.uuid = ''
        modalData.approveDesc = null
      }
    },
    { immediate: true, deep: true },
  )

  /** 表格列配置 */
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      customRender: (row) => `${row.index + 1}`,
    },
    { title: '订阅组ID', dataIndex: 'appId' },
    { title: '订阅组名称', dataIndex: 'name' },
    { title: '中文名称', dataIndex: 'cname' },
    { title: '订阅组类型', dataIndex: 'type' },
    { title: '订阅组状态', dataIndex: 'disable' },
    { title: '申请人账号', dataIndex: 'userName' },
    { title: '申请人类型', dataIndex: 'companyName' },
    { title: '创建时间', dataIndex: 'createdTime' },
    { title: '审核时间', dataIndex: 'approveTime' },
    { title: '操作', dataIndex: 'action' },
  ]

  const changeAppState = async () => {
    confirmLoading.value = true
    const { responseCode } = await updateAppState({ ...modalData })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      modalData.uuid = ''
      modalData.approveDesc = null
      modalData.visible = false
      queryList({ current: 1 })
    }
    confirmLoading.value = false
  }

  const confirmRecord = (data) => {
    modalData.uuid = data.uuid
    modalData.disable = 2
    changeAppState()
  }

  const showModal = (data, disable) => {
    modalData.uuid = data.uuid
    modalData.disable = disable
    modalData.visible = true
  }

  const showDetail = async (data) => {
    const { responseCode, responseData } = await getApplyByDetail({ uuid: data.uuid })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      detailData.visible = true
      detailData.data = responseData
    }
  }

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<ApplyInfoByPageTypes.IRequest, ApplyInfoByPageTypes.IResponse[]>(searchParam, getApplyByPage)

  onMounted(() => {
    search()
  })

  /**
   * 重置
   */
  const clear = () => {
    searchParam.type = null
    searchParam.disable = null
    searchParam.name = null
    searchParam.startTime = null
    searchParam.endTime = null
    timeRange.value = undefined
    search()
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })
</script>

<style lang="less" scoped>
  .secret-container {
    display: inline-block;
    width: 230px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .apply-title {
      text-align: center;
      padding-bottom: 15px;
    }

    .apply-logo {
      width: 64px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
</style>
